<!-- <template>
	<view class="content">
		<view class="qianziban">
			<l-signature disableScroll backgroundColor="#fff" ref="signatureRef" :penColor="penColor" :penSize="penSize"
				:openSmooth="openSmooth"></l-signature>
				<button  class="clear-button" @click="onClick('clear')">清空</button>
		</view>
		<view style="display: flex;">
			<button  class="clear-button" @click="onClick('clear')">清空</button>
			<button @click="onClick('undo')">撤消</button>
			<button @click="onClick('save')">保存</button>
			<button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
			<button @click="onClick('clear')">签署</button>
			<button @click="onClick('clear')">清空</button>
			<button @click="onClick('clear')">保存</button>
		</view>
	</view>

</template> -->

<template>
  <view class="content">
    <view class="qianziban">
      <l-signature 
        disableScroll 
        backgroundColor="#fff" 
        ref="signatureRef" 
        :penColor="penColor" 
        :penSize="penSize"
        :openSmooth="openSmooth"
      ></l-signature>
      <button class="clear-button" @click="onClick('clear')">{{staValue}}</button>
    </view>
	<!-- <button @click="onClick('save')">保存</button> -->
	<!-- <input style="width: 100%;height: 30px;border: red 1px solid;" v-model="imgUrl"></input> -->
  </view>
</template>

<script>
	export default {
		props:{
			isSave:Boolean
		},
		data() {
			return {
				title: 'Hello',
				staValue:'清空',
				imgUrl:'',
				da:'123456'
			}
		},
		onLoad() {
			
		},
		watch:{
			isSave(newValue){
				if(newValue){
					this.staValue = '保存'
					this.onClick('save')
					this.$emit('imgUrl',this.da)
				}
			}
		},
		methods: {
			onClick(type) {
				if (type == 'openSmooth') {
					this.openSmooth = !this.openSmooth
					return
				}
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 是否为空画板 无签名
							console.log(res.isEmpty)
							// 生成图片的临时路径
							// app | H5 | 微信小程序 生成的是base64
							this.url = res.tempFilePath
							uni.setStorageSync('url', res.tempFilePath)
							uni.navigateTo({
								url: '/pages/result/result',
							})
							this.imgUrl = this.url
							this.$emit('imgUrl',this.imgUrl)
							console.log('子组件：'+this.imgUrl);
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			}

		}
	}
</script>


<style>
.qianziban {
    width: 95%;
    max-width: 1200px;
    height: 400px;
    margin: 20px auto;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1);
    border-radius: 15px;
    background-color: #f8f9ff;
    padding: 25px;
    box-sizing: border-box;
    border: 2px solid #4a90e2;
    position: relative;
    overflow: hidden;
}

.qianziban::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 100px;
    height: 100px;
    background-color: #4a90e2;
    transform: rotate(45deg);
    opacity: 0.1;
}

.qianziban::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 100px;
    height: 100px;
    background-color: #4a90e2;
    transform: rotate(45deg);
    opacity: 0.1;
}

.clear-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #e7effc;
    color: black;
    border: none;
    padding: 4px 18px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10;
}

.clear-button:hover {
    background-color: #d0e0f7;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.clear-button:active {
    background-color: #b8d1f3;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    transform: translateY(1px);
}
</style>